<template>
  <div class="vs-violation-type">
    <VsModuleTitle name="违法类型" />
    <div class="vs-violation-type__content">
      <div class="vtc-do">
        <div class="vtc-do__text">
          合计
          <span class="vtc-do__text-num">{{ counts }}</span>
          <span class="vtc-f-cen__unit"> 户 </span>
        </div>
        <div class="vtc-do__round-main">
          <div class="vtc-do__round">
            <div class="vtc-do__round-s">
              <div class="vtc-do__round-s-sc vtc-do__round-s-sc-l"></div>
              <div class="vtc-do__round-s_inc vtc-do__round-s_inc-l"></div>
              <div class="vtc-do__round-s_cle"></div>
            </div>

            <div class="vtc-do__round-center">
              <div class="vtc-do__round-center-sc vtc-do__round-b-sc-l"></div>
              <div class="vtc-do__round-center_inc vtc-do__round-b_inc-l"></div>
            </div>

            <div class="vtc-do__round-s">
              <div class="vtc-do__round-s-sc vtc-do__round-s-sc-r"></div>
              <div class="vtc-do__round-s_inc vtc-do__round-s_inc-r"></div>
              <div class="vtc-do__round-s_cle"></div>
            </div>
          </div>
          <div class="vtc-do__round-r-line"></div>
          <div class="vtc-do__round-l-line"></div>
        </div>

        <div class="vtc-do__to-top">
          <svg-icon
            name="vt-to-top"
            class-name="vt-to-top_one"
            color="#C1E61A"
          />
          <svg-icon
            name="vt-to-top"
            class-name="vt-to-top_two"
            color="rgba(193, 230, 26, 0.3)"
          />
        </div>
      </div>
      <div class="vtc-f">
        <div class="vtc-f-cen">
          <div
            :class="['vtc-f__h', 'vtc-fh_col' + (index + 1)]"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <div class="vtc-f__h-text">{{ item.label }}</div>
            <div class="vtc-f__h-round">{{ item.value }}</div>
          </div>
        </div>
        <div class="vtc-f-cen__unit">&nbsp;</div>
      </div>
    </div>
  </div>
</template>

<script>
import VsModuleTitle from "../ModuleTitle/index";
export default {
  name: "VsViolationType",
  components: { VsModuleTitle },
  filters: {},
  props: {},
  data() {
    return {
      counts: 1266,
      dataList: [
        { label: "未批先建", value: 123 },
        { label: "少批多占", value: 5677 },
        { label: "改变用途", value: 232 },
        { label: "非法转让", value: 33 }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  methods: {}
};
</script>

<style lang="less">
@import "index.less";
.vs-violation-type {
  margin-top: 26px !important;
  box-sizing: border-box;
  &__content {
    background-color: rgba(12, 26, 58, 0.4);
    height: 268px;
    .vtc-do {
      height: 135px;
    }
    .vtc-f {
      height: 130px;
      background-image: url("~@/assets/images/visual-screen/vtc-footer.png");
      background-repeat: no-repeat;
      background-position: 50% 80%;
      padding: 0 10px;
      box-sizing: border-box;

      .vtc-f-cen {
        display: flex;
        justify-content: space-between;
      }
      .vtc-f-cen__unit {
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.5);
        letter-spacing: 0;
        text-align: center;
        margin-top: 20px;
      }
      &__h {
        height: 90px;
        &-text {
          font-size: 16px;
          color: #ffffff;
          letter-spacing: 0;
          text-align: center;
          font-family: PingFangSC-Semibold;
          margin-bottom: 8px;
          box-sizing: border-box;
        }
        &-round {
          width: 60px;
          height: 60px;
          border: 6px solid #40ffbe;
          box-sizing: border-box;
          border-radius: 50%;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: antonio-bold;
          font-size: 18px;
          color: #5fffc2;
          letter-spacing: 1.8px;
          text-align: center;
        }
      }
    }
  }
  .vtc-fh_col1 {
    .vtc-f__h-round {
      color: #3b86ee;
      border-color: rgba(59, 134, 238, 0.8);
    }
  }
  .vtc-fh_col2 {
    .vtc-f__h-round {
      color: #00bfff;
      border-color: #00bfff;
    }
  }
  .vtc-fh_col3 {
    .vtc-f__h-round {
      color: #00ffec;
      border-color: #00ffec;
    }
  }
  .vtc-fh_col4 {
    .vtc-f__h-round {
      color: #5fffc2;
      border-color: #40ffbe;
    }
  }
  .vtc-f-cen__unit {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0;
    text-align: center;
    margin-top: 20px;
  }
}
</style>
